When you search the internet for the answer to your question, you prefer a website over other sites and spend a lot of time on it in order to meet your needs.
What is it about these sites that motivates you to use it?
Before you realize the quality of the site content , it is the appearance of the site that attracts you, and you decide whether to choose it to continue your work or not based on the appearance of the site, in order to beautify the appearance of it, you can use different programming languages, one of which is CSS, and various programmers and designers are very interested in using this language to do this task, here are some features that you can add to various content, including transition and animation, but before that we need to take a look at the CSS definition.
What is CSS?
It stands for Cascading Style Sheets , in fact, it describes how HTML elements are displayed on various sites, simply put, if you consider HTML as the skeletons of a human body, CSS can be considered of as the skin which ultimately make up a human appearance, and it can be used to control the layout of multiple web pages at the same time.Therefore, if you couldn’t take the advantages of it, web world would be so boring and users would definitely be tired of navigating, so that they wouldn’t prefer to spend long hours in it to get the answers they need.
CSS Transitions:
It is one of the properties that you can apply on HTML elements and by specifying different features in it, you can make the desired element more visible or do other things with its help, in other words, with the help of it, you can change property values which you can specify a time period to do this, different browsers can support this feature in different sizes, for example Google Chrome supports different features created by CSS Transitions more than other browsers, in order to use this, you need to consider two things, one of which is the element you want to apply this property to, and also specifying how long you want the transition effect to run during that time.Consider the following example.
<! DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: blue;
transition: width 3s;
}
div: hover {
width: 400px;
}
</style>
</head>
<body>
<h1> Software, Web Design & Mobile App Development </h1>
<p> Make your software dreams come true </p>
<div> </div>
<p> <b> DotNek Web Analysis, Web Design, Software programming, Mobile App development </p>
</body>
</html>
You may also place a blue square in the content between the two p elements and want it to become a larger square when the mouse hovers over it, meaning that both the length and the width of the square must be changed, now consider the following example.
<! DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: blue;
transition: width 3s, height 5s;
}
div: hover {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1> Software, Web Design & Mobile App Development </h1>
<p> Make your software dreams come true </p>
<div> </div>
<p> <b> Do you know, some people are earning millions just from owning a mobile app? </p>
</body>
</html>
Transition-timing-function:
By using it, the speed of transition property will be set, the transition-timing-function property can have the following values:
- Linear:
If this item is selected, the transition property is done at the same speed.
Read more on:https://www.dotnek.com/Blog/Web/teaching-transition-and-animation-properties
link:https://dotnek.mystrikingly.com/
Related link:DotNek Website Analysis
:: برچسبها:
dotnek ,
seo ,
site ,
:: بازدید از این مطلب : 69
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
